<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:content="value"
            :index='key'
            v-for="(value,key) in list" @delete="handleItemDelete"></todo-item>
        </ul>

        <div>{{fullName}}
            {{age}}
        </div>
    </div>

    <script>
        //MVVM

        //全局组件
        // Vue.component("Todoitem",{
        //     props:['content'],
        //     template:"<li>{{content}}</li>"
        // })

        var TodoItem = {
            name: "TodoItem",
            props: ['content','index'],
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    this.$emit("delete",this.index)
                }
            },
        };
        var app = new Vue({
            components: { [TodoItem.name]: TodoItem },
            // components: { TodoItem: TodoItem },
            el: '#app',
            data: {
                list: [],// ['第一课1', '第二课2'],
                inputValue: '',
                firstName: "hongfei",
                lastName:"tan",
                fullName: "A B",
                age:18
            },
            // //计算属性
            // computed: {
            //     fullName:function(){
            //        return this.firstName + " * " + this.lastName
            //     }
            // },
            watch: {
                firstName:function(){
                    this.fullName = this.firstName + " " +this.lastName;
                },
                lastName:function(){
                    this.fullName = this.firstName + " " +this.lastName;
                }
            },
            methods: {
                fullName: function () {
                    // alert(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleBtnClick: function () {
                    console.log("计算了一次")
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleItemDelete: function (index) {
                    // alert(index) ;
                    //splice函数  从指定下标开始删除  第二个参数 删除几位
                    this.list.splice(index, 1);
                }

            }
        })
    </script>
</body>

</html>